<template>
  <div>
    <micro-app
      name="app1"
      :url="url"
      :data="microAppData"
      @created="handleCreate"
      @beforemount="handleBeforeMount"
      @mounted="handleMount"
      @unmount="handleUnmount"
      @error="handleError"
      @datachange="handleDataChange"
    ></micro-app>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import config from '../config'
// import microApp from '@micro-zoe/micro-app'
import { EventCenterForMicroApp } from '@micro-zoe/micro-app'

// @ts-ignore 因为vite子应用关闭了沙箱，我们需要为子应用appname-vite创建EventCenterForMicroApp对象来实现数据通信
window.eventCenterForAppNameVite = new EventCenterForMicroApp('app1')

const url = ref(`${config.childApp}/child/react/`)
const microAppData = reactive({
  msg: '来自基座的数据'
})

const handleCreate = () => {
  console.log('child 创建了')
}

const handleBeforeMount = () => {
  console.log('child 即将被渲染')
}

const handleMount = () => {
  console.log('child 已经渲染完成')

  setTimeout(() => {
    // @ts-ignore
    microAppData.msg = '来自基座的新数据'
  }, 2000)
}

const handleUnmount = () => {
  console.log('child 卸载了')
}

const handleError = () => {
  console.log('child 加载出错了')
}

const handleDataChange = (e) => {
  console.log('来自子应用 child 的数据:', e.detail.data)
}
</script>

<style></style>
